<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/lib/vue.min.js"></script>
  <script src="../js/lib/three/build/three.min.js"></script>
  <style>.container{width: 1000px; height: 800px}</style>
</head>
<body>
<div id="app">
  <div class="container" ref="container"></div>
</div>
<script>
  new Vue({
    el: '#app',
    data(){
    	return {
		    camera: null,
		    scene: null,
		    renderer: null,
		    mesh: null,
        group: null,
		    uniforms: {
			    resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
			    iTime: { type: 'f', value: 0 },
			    iResolution: { type: 'v2', value: new THREE.Vector3(100, 100, 1) },
			    iMouse: { type: 'v2', value: new THREE.Vector2() }
		    }
      }
    },
    mounted(){
    	this.initThree()

	    this.animate()
    },
    methods: {
    	initThree(){
		    const vertexShader = `
		      varying vec2 vUv;
          void main(){
            vUv = uv;
            vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
            gl_Position = projectionMatrix * mvPosition;
          }
        `
		    const shaderString = `
		      varying vec2 vUv;
          precision mediump float;
          uniform float iTime;
          uniform vec2 iResolution;
          void main(void){
            float TAU = 6.28318530718;
            float time = 0.5 * iTime + 23.0;
            vec2 position = - 1.0 + 40.0 * vUv;
            float a = atan( position.y, position.x );
            float r = sqrt( dot( position, position ) );
            vec2 uv = position.xy / iResolution.xy;
            #ifdef SHOW_TILING
              vec2 p = mod(uv*TAU, TAU)-250.0;
            #else
              vec2 p = mod(uv*TAU, TAU)-250.0;
            #endif
              vec2 i = vec2(p);
              float c = 1.0;
              float inten = .005;
              for (int n = 0; n < 5; n++)
              {
                float t = time * (1.0 - (3.5 / float(n+1)));
                i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));
                c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten)));
              }
              c /= float(5);
              c = 1.17-pow(c, 1.4);
              vec3 color = vec3(pow(abs(c), 8.0));
              color = clamp(color + vec3(0.0, 0.35, 0.5), 0.0, 1.0);
            #ifdef SHOW_TILING
              vec2 pixel = 8.0 / iResolution.xy;
              uv *= 2.0;
              float f = floor(mod(iTime*.5, 2.0));
              vec2 first = step(pixel, uv) * f;
              uv = step(fract(uv), pixel);
              color = mix(color, vec3(1.0, 1.0, 0.0), (uv.x + uv.y) * first.x * first.y);
            #endif
              gl_FragColor = vec4(color, 1.0);
          }
        `
		    const shaderToy = new THREE.ShaderMaterial({
			    vertexShader,
			    fragmentShader: shaderString,
			    transparent: true,
			    uniforms: this.uniforms,
			    side: THREE.DoubleSide
		    })
    		const container = this.$refs.container
		    this.camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 1, 1000)
		    this.camera.position.z = 10
        this.scene = new THREE.Scene()
		    this.renderer = new THREE.WebGLRenderer({antialias: true})
		    const geometry = new THREE.BoxGeometry(4, 4, 4)
		    const material = new THREE.MeshNormalMaterial()
		    const mesh = new THREE.Mesh(geometry, shaderToy)
		    this.group = new THREE.Group()
		    this.group.add(mesh)
		    this.scene.add(this.group)
        this.renderer.setSize(container.clientWidth, container.clientHeight)
		    container.appendChild(this.renderer.domElement)
      },
	    animate() {
		    requestAnimationFrame(this.animate)
		    this.group.rotation.x += 0.01
		    this.group.rotation.y += 0.02
        this.uniforms.iTime.value += 0.01
		    this.renderer.render(this.scene, this.camera)
	    }
    }
  })
</script>
</body>
</html>
